<template>
  <div class="turnTable">
    <infoText ref="infoText" v-if="demoMode"></infoText>
    <alert ref="alertRef" @alertOff="alertOff" :source="source"></alert>
    <div class="position1">
      <img :src="obj.pageBg" alt="" />
    </div>
    <div class="position2">
      <div class="part0">
        <div class="part0Logo1" :style="`padding-top: ${obj.pageLogoTop}vh;`">
          <img class="part0Logo2" :src="obj.pageLogo" alt="" />
        </div>
      </div>
      <div id="stage">
        <div class="stage1">
          <img v-if="obj.arcBackground" :style="`top: ${obj.arcBackgroundNum}px;width: ${obj.arcBackgroundWidth}vw;`" class="img1" :src="obj.arcBackground" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TurnGame from './game'
import $util from '../../utils'
import alert from '../../component/dialog/index1.vue'
import infoText from '../../component/infoText/index.vue'

export default {
  props: {
    source: {
      type: Object,
      default: () => {},
    },
    next: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      door1: true,
      gameData: null,
      prizeNo: 0,
      obj: {},
      demoMode: true,
    }
  },
  components: {
    alert,
    infoText,
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: '幸运大转盘',
    })
    this.obj = {
      prizeList: [
        {
          name: '谢谢参与1',
          bgColor: 'rgb(255, 232, 181)',
          img: 'https://game.jszechao.com/img/10.png',
        },
        {
          name: '谢谢参与2',
          bgColor: 'rgb(255, 185, 51)',
          img: 'https://game.jszechao.com/img/10.png',
        },
        {
          name: '谢谢参与3',
          bgColor: 'rgb(255, 232, 181)',
          img: 'https://game.jszechao.com/img/10.png',
        },
        {
          name: '谢谢参与4',
          bgColor: 'rgb(255, 185, 51)',
          img: 'https://game.jszechao.com/img/10.png',
        },
      ],
      prizeNo: 0,
      el: document.querySelector('#stage'),
      vue: this,
      pageLogoTop: 8,
      arcBackgroundNum: 258,
      arcBackgroundWidth: 60,
      pageBg: require('./img1/bg1.png'),
      pageLogo: require('./img1/a16.png'),
      arcBackground: require('./img1/a22.png'),
    }

    try {
      let fix1 = decodeURI(location.search)
        .split('#')[0]
        .split('?')[1]
      let qData = $util.StrQuery(fix1, 'qd')
      if (qData) {
        this.demoMode = false
        let obj1 = JSON.parse(qData)
        Object.assign(this.obj, obj1)
      }
    } catch (error) {}

    if (this.source) {
      this.demoMode = false
      Object.assign(this.obj, this.source)
    }

    console.log('====== 游戏参数 ======')
    console.log(this.obj)
    this.$refs.alertRef.reShow()

    if (this.obj.prizeNo) {
      this.prizeNo = this.obj.prizeNo
    }

    const reLoad = () => {
      if (this.gameData) {
        this.gameData.stop()
      }
      this.gameData = null
      this.gameData = new TurnGame(this.obj)
      this.gameData.init()
    }

    reLoad()

    if (this.next) {
      this.$store.dispatch('onUserLogSend', {
        pageName: '大转盘游戏首页',
        behavior: {
          visist: '进入页面',
        },
      })
    }
  },
  destroyed() {
    if (this.gameData) {
      this.gameData.remove()
    }
    this.gameData = null
  },
  methods: {
    alertOff() {
      try {
        if (this.next) {
          this.next()
        } else {
          this.$parent.alertOff()
        }
      } catch (error) {
        this.door1 = true
      }
    },
    alertMsg() {
      if (this.gameData) {
        this.$refs.alertRef.popUpMsg(6, this.obj.prizeName || '0')
      }
    },
    turnPlay() {
      if (this.door1) {
        this.door1 = false
        this.gameData.playGame()

        setTimeout(() => {
          try {
            if (this.next) {
              const success = (res) => {
                let luckObj = null
                if (res.awardType) {
                  this.source.prizeList.forEach((v1, index) => {
                    if (v1.goodId == res.goodId) {
                      luckObj = res
                      luckObj.index = index
                    }
                  })
                  this.prizeNo = 0
                  this.obj.prizeName = {}
                  if (luckObj) {
                    this.prizeNo = luckObj.index
                    this.obj.prizeName = luckObj.name
                  }
                } else {
                  this.$refs.alertRef.popUpMsg(8)
                }
                if (this.gameData) {
                  this.gameData.playGame1()
                }
                return true
              }
              const fail = (err) => {
                this.door1 = true
                if (this.gameData) {
                  this.$refs.alertRef.popUpMsg(8, err.message)
                }
                return true
              }
              this.next(success, fail)
              this.$store.dispatch('onUserLogSend', {
                pageName: '大转盘游戏首页',
                behavior: {
                  click: '点击大转盘',
                },
              })
            } else {
              this.$parent
                .turnPreFoo()
                .then((res) => {
                  this.prizeNo = res.prizeNo
                  this.obj.prizeName = res.prizeName
                  if (this.gameData) {
                    this.gameData.playGame1()
                  }
                })
                .catch((err) => {
                  this.door1 = true
                  if (this.gameData) {
                    this.$refs.alertRef.popUpMsg(8, err)
                  }
                })
            }
          } catch (error) {
            this.door1 = true
            if (this.gameData) {
              this.gameData.playGame1()
            }
          }
        }, 3000)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.turnTable {
  position: relative;
  .position1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  .position1 img {
    width: 100%;
    height: 100%;
  }

  .position2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .part0 {
    height: 30vh;
    .part0Logo1 {
      text-align: center;
      width: 610rpx;
      margin: 0 auto;
    }
    .part0Logo2 {
      width: 100%;
    }
  }
  #stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    .stage1 {
      .img1 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
</style>
